﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftNavCategory.ascx.cs"
    Inherits="LeftNavCategory" %>
<div class="left-nav">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Flows</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <div id="search_flows" class="search">
                        <div class="input-append">
                            <input id="txtSearchFlows" type="text" class="span2 search-query" placeholder="Search flows..." />
                            <%--<i class="icon-search"></i>--%> 
                        </div>
                    </div>
                    <div id="jstree_Flows" class="demo">
                        <asp:Literal runat="server" ID="treeFlows"></asp:Literal>
<%--                        <ul>
                            <li >Root node 1
                                <ul>
                                    <li data-jstree='{  }'><a href="#"><em>initially</em> <strong>selected</strong></a></li>
                                    <li data-jstree='{ "icon" : "http://jstree.com/tree-icon.png" }'>custom icon URL</li>
                                    <li >initially open
                                        <ul>
                                            <li data-jstree='{ "opened" : true, "selected" : true }' >Another node</li>
                                        </ul>
                                    </li>
                                    <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li>
                                </ul>
                            </li>
                            <li><a href="http://www.jstree.com">Root node 2</a></li>
                        </ul>--%>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Systems</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <div id="search_systems" class="search">
                        <div class="input-append">
                            <input id="txtSearchSystems" type="text" class="span2 search-query" placeholder="Search systems..." />
                            <%--<i class="icon-search"></i>--%> 
                        </div>
                    </div>
                    <div id="jstree_Systems" class="demo">
                        <asp:Literal runat="server" ID="treeSystems"></asp:Literal>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var to = false;
    $(document).ready(function () {
        console.log('LeftNavCategory: ready:');

        loadFlowTree();
        loadSystemTree();
        activeAccordionByUrl();


        //clickFlow('6db5c865-082d-4b15-b982-bc2c9102a4e6');
    });

    function clickFlow(id) {
        console.log('clickFlow: ' + id);
        if (id)
            $('#jstree_Flows').jstree('select_node', id);
    }

    function clickSystem(id) {
        console.log('clickSystem: ' + id);
        if (id)
            $('#jstree_Systems').jstree('select_node', id);
    }


    function activeAccordionByUrl() {
        var url = document.URL;

        if (url.contains("/viewer/flow")) {
            $("#accordion #collapseOne").addClass("in");
        }
        else if (url.contains("/viewer/system")) {
            $("#accordion #collapseTwo").addClass("in");
        }
    }


    function loadFlowTree() {
        $('#jstree_Flows').jstree({
            'plugins': ["search"],
            "core": {
                "check_callback": true
            },
            "search": { 'fuzzy' : false }
        });
    }

    function loadSystemTree() {
        $('#jstree_Systems').jstree({
            'plugins': ["search"],
            "core": {
                "check_callback": true
            },
            "search": { 'fuzzy': false }
        });
    }




    $('#jstree_Flows').on("changed.jstree", function (e, data) {
        console.log('Flow tree: '+ data.selected);
        var url = data.node.data.jstree.url;
        var currentUrl = window.location.pathname;
        
        // Prevent self loading recursively
        if (url && currentUrl != url) {
            window.location = url;
        }

    });

    $('#jstree_Systems').on("changed.jstree", function (e, data) {
        console.log('System tree: ' + data.selected);
        var url = data.node.data.jstree.url;
        var currentUrl = window.location.pathname;

        // Prevent self loading recursively
        if (url && currentUrl != url) {
            window.location = url;
        }

    });

//    $('button').on('click', function () {
//        $('#jstree').jstree(true).select_node('child_node_1');
//        $('#jstree').jstree('select_node', 'child_node_1');
//        $.jstree.reference('#jstree').select_node('child_node_1');
//    });

    $("input#txtSearchFlows").on('keyup', function () {

        if (to)
            clearTimeout(to);

        to = setTimeout(function () {
            var str = $('input#txtSearchFlows').val();
            $('#jstree_Flows').jstree('search', str);

        }, 250);

    });

    $("input#txtSearchSystems").on('keyup', function () {

        if (to)
            clearTimeout(to);

        to = setTimeout(function () {
            var str = $('input#txtSearchSystems').val();
            $('#jstree_Systems').jstree('search', str);

        }, 250);

    });
</script>
